<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>https://codepen.io/ispal/pen/LxjgEj</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body translate="no">
<!-- App -->
<div id="app">

    <component :is="state.view">
        <h1>{{ state.view }}</h1>
    </component>
    <controls></controls>
</div>

<!-- Controls -->
<template id="controls">
    <ul class="controls">
        <li v-for="(animation, index) in state.animations" @click.prevent="setView(animation)" v-bind:class="{ 'active': animation === state.view }">
            {{ animation }}
        </li>
    </ul>
</template>

<!-- Transitions -->
<template id="page">
    <transition
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false"
            appear
    >
        <div class="page" v-bind:class="state.view">
            <div class="center">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
</body>
<script src="script.js"></script>
</html>